<template>
    <dzs-dialog :title="title" :isShow="isShow" @close="onCancel" @open="onOpen">
        <dzs-form :loadingOption="formInfo" :status="status" ref="myForm" v-model:value="formData" :options="formOptions" :height="500" @onCancel="onCancel" @onSubmit="onSubmit">
        </dzs-form>
    </dzs-dialog>
</template>
<script setup lang="ts">
import { ref, computed , onMounted } from "vue";
import type { dzsFormProps } from "@/components/dzs-form/@types";
import type {dzsFormInstance} from "@/components/dzs-form";
import type { formData } from "../@types";
import { addMenu , getParentMenu , updateMenu} from "../api/api";
import { typeList } from "../config";
import { ElNotification  } from 'element-plus';
import type { MenuItem } from "../@types";
const emit = defineEmits(['cancel', 'update:isShow' , 'onHoldSearch'])
const props = defineProps<{
    dialogData ?: MenuItem,
    status : string,
    isShow : boolean
}>()

const myForm = ref<dzsFormInstance>();
const formData = ref<formData>({
    ID: "",
    parent_ID: "",
    name: "",
    type: "",
    path: "",
    redirect: "",
    component: "",
    hidden: false,
    is_keep_alive: false,
    icon: "",
    title: "",
    affix: false,
    meta: "",
    sorts: "99",
    is_show: true,
})

const formInfo = ref({
    loading : false,
})

const parentList = ref<dzsFormProps['children'][]>([])

const title = computed(() => {
    return props.status === "add" ? "添加菜单" : props.status === "edit" ? "编辑菜单" : "查看详情"
})
const formOptions = computed<dzsFormProps['formOptions']>(() => {
    return {
        formProps: {
            "labelWidth": "130px"
        },
        formItem: [
            {
                label: "ID",
                type: "input",
                key: "ID",
                isHidden: true,
            },
            {
                label: "父级路由ID",
                type: "select",
                key: "parent_ID",
                children: parentList.value,
                span: 12
            },
            {
                label: "类型",
                type: "select",
                key: "type",
                rules: [
                    {
                        required: true,
                        message: "请选择类型",
                        trigger: "change"
                    }
                ],
                children: typeList,
                span: 12
            },
            {
                label: "路由标题(title)",
                type: "input",
                key: "title",
                rules: [
                    {
                        required: true,
                        message: "路由标题不能为空",
                        trigger: "blur"
                    }
                ],
                span: 12
            },
            {
                label: "路由名称(name)",
                type: "input",
                key: "name",
                rules: [
                    {
                        required: true,
                        message: "路由名称不能为空",
                        trigger: "blur"
                    }
                ],
                span: 12
            },
            {
                label: "路由路径",
                type: "input",
                key: "path",
                rules: [
                    {
                        required: true,
                        message: "路由路径不能为空",
                        trigger: "blur"
                    }
                ],
                span: 12
            },
            {
                label: "重定向地址",
                type: "input",
                key: "redirect",
                span: 12
            },
            {
                label: "路由组件",
                type: "input",
                key: "component"
            },
            {
                label: "是否隐藏",
                type: "switch",
                key: "hidden",
                span: 12
            },
            {
                label: "是否保持",
                type: "switch",
                key: "is_keep_alive",
                span: 12
            },
            {
                label: "是否固定",
                type: "switch",
                key: "affix",
                span: 12
            },
            {
                label: "路由图标",
                type: "input",
                key: "icon",
                span: 12
            },
            {
                label: "更多参数配置",
                type: "input",
                key: "meta",
                props: {
                    type: "textarea",
                    rows: 4,
                    placeholder: "请输入更多参数配置，如：{keepAlive:true}"
                }
            },
            {
                label: "排序",
                type: "input",
                key: "sorts",
                props: {
                    type: "number"
                },
                span: 12
            },
            {
                label: "是否展示",
                type: "switch",
                key: "is_show",
                span: 12
            },
        ]
    }
})

onMounted(() =>{
    getParentMenuList();
})

const onCancel = () => {
    myForm.value?.onCancel<formData>(false , {
        success:(res)=>{
            formData.value = res
        }
    })
    emit('cancel');
    emit('update:isShow', false);
}

const onOpen = () => {
    if(props.dialogData?.ID){
        formData.value = props.dialogData
    }
}
/**获取父级菜单*/
const getParentMenuList = async () => {
    const res : any = await getParentMenu();
    parentList.value = res.data as dzsFormProps['children'][];
} 

const onSubmit = () => {
    formInfo.value.loading = true;
    if(props.status === "edit"){
        updateMenu({
            ...formData.value
        }).then(res => {
            formInfo.value.loading = false;
            ElNotification({
                title: '成功',
                message: "提交成功",
                type: 'success'
            })
            emit("onHoldSearch");
            onCancel();
        }).catch(()=>{
            formInfo.value.loading = false;
        })
        return;
    }
    addMenu({
        ...formData.value
    }).then(res => {
        formInfo.value.loading = false;
        ElNotification({
            title: '成功',
            message: "提交成功",
            type: 'success'
        })
        emit("onHoldSearch");
        onCancel();
    }).catch(()=>{
        formInfo.value.loading = false;
    })
}
</script>
<style scoped></style>